<!--main_hall.html-->
{% extends "base.html" %}

{% block conteudo%}


<script src="/static/js/deck.js" type="text/javascript"></script>
<script src="/static/js/bootstrap-popover.js" type="text/javascript"></script>
<script src="/static/js/bootstrap-tooltip.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/static/js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="/static/js/jquery.mousewheel-3.0.4.pack.js"></script>

<link rel="stylesheet" href="/static/style/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<link href="/static/style/chat.css" rel="stylesheet">
<script src="/static/js/deck.js" type="text/javascript"></script>
<script src="/static/js/socket.io.js"></script>





<script>
        // socket.io specific code
        var socket = io.connect('{{java_game_client_host}}');

        socket.on('connect', function() {
                $('#chat').addClass('connected');
                $('#lines').append($('<p>').append($('<em>').text("You are connected to the chat!")));
                worker();
        });

        socket.on('updateLoggedUsers', function(nicknames) {
                $('#nicknames').empty().append($('<span>Online: </span>'));
                $('#player-list').html("")
                for (var i in nicknames) {
                		//player-list
                		$('#player-list').append('<a href="#"><i class="icon-user"></i>'+nicknames[i]+'</a><br />');
                        $('#nicknames').append($('<b>').text(nicknames[i]));
                }
        });

        socket.on('chatMessage', message);
        
        socket.on('reconnect', function() {
                $('#lines').remove();
                message('System', 'Reconnected to the server');
        });

        socket.on('reconnecting', function() {
                message('System', 'Attempting to re-connect to the server');
        });

        socket.on('error', function(e) {
                message('System', e ? e : 'A unknown error occurred');
        });

        function message(from, msg) {
                $('#lines').append($('<p>').append($('<b>').text(from), msg));
                $('#lines').get(0).scrollTop = 10000000;
        }

        // dom manipulation
        function sendChatMessage() {
                socket.emit('chatMessage', $('#message').val());
                clear();
        };

        function clear() {
                $('#message').val('').focus();
        };
        
        socket.emit('establishConnection', '{{user_id}}',"{{password}}",  function(set) {
			clear();
			return $('#chat').addClass('nickname-set');
        });
                
        
		function logout(){
			socket.emit('logout', "{{user_id}}");
			window.location = "/?logout=true"
		};
		

		//Apply to button: 
		$("#logoutButton").attr("onclick","logout();");


        //keep socket alive
        function worker() {
                socket.emit('ping', 'ping');
                setTimeout(worker, 30000);
        };
        
        
        function createNewRoom(){
		  	socket.emit('createRoom', $('#roomName').val());
		 	$('#fancybox-close').trigger('click'); //"clicks" to close fancybox
			$('#rooms').append(
				'<div id="room' + Number(Number($(".room").length) + 1) +'"class="room" style="margin-top:20px;display:none">'+
					'<h1>'+$('#roomName').val()+'</h1>'+
					'<label style="float:right;margin-top:11px;">{{user_nickname|capfirst}}</label>'+
					'<label class="centered-resource status">Waiting</label>'+
					'<button class="btn" style>Join</button>'+
					'<h3 style="float:right; position:relative; bottom:0px; right:0px;">2/4</h3>'+				
				'</div>'
			);
			$('#room' + $('.room').length).show("puff");
			$('#roomName').val(''); //clean the field
        }
        
        
        
        function init(){
        	$("a#inline").fancybox();
        	window.addEventListener('blur', function(){worker();},false);//prevents disconnection on tab change
        }
        
        document.ready = init;
</script>

<link href="//fonts.googleapis.com/css?family=IM+Fell+English:400,400italic|Open+Sans" rel="stylesheet" type="text/css">

<div class="centered-resource">
                <div class="main-hall-box">
                        <h3>User Decks</h3>
                        <div>
                        {% if user_decks %}
                        
                        <select id="deck_select" class="span2" action="/editdeck">
                                {% for deck in user_decks %}
                                <option>{{deck.firstChild.data}}</option>
                                {% empty %}
                                <option>No decks!</option>
                                {%endfor%}
                        </select>
                        <button onclick="editDeck()" class="btn btn-success ui-button" style:"width:100%">
                                Edit deck
                        </button>
                        <button onclick="createDeck()" class="btn btn-primary ui-button" style:"display:block">
                                Create a new deck
                        </button>
                        {%else%}
                        <button onclick="createDeck()" class="btn btn-primary ui-button" style:"display:block">
                                Create a new deck
                        </button>
                        {% endif %}
                        </div>
                </div>
        <!--div class="main-hall-box">
                        <h3>Main Hall</h3>
        </div><!--/span-->
        <div class="main-hall-box">
                        <h3>Online Users</h3>
                        <div id="player-list">
                         <img class="centered-resource" src="/static/img/ajax-loader-big.gif" /> 
                         <ul id="playersList" class="nav">
                        </ul>
                </div>
                        
        </div><!--/span-->
                
</div>

<!-- Rooms -->
<div class="centered-resource">
	<div id="rooms" class="main-hall-box">
		<h3 style="display:inline;" >Rooms</h3>
		<!--a class="inline" href="#createRoomDiv"></a-->
		
		
		<a style="float:right;"id="inline" href="#createRoomDiv"><button class="btn btn-primary ui-button">Create a new room</button></a>

		<div style="display:none">
			<form form onsubmit="javascript:createNewRoom();return false;" id="createRoomDiv">
				<input id="roomName" type="text" placeholder="Room name"><br />
				<input disabled="disabled" name="roomPassword" type="text" placeholder="Room password"><br />
				<button id="createNewRoomButton" class="centered-resource btn btn-primary ui-button">Create room</button>
			</form>
		</div>
		
		<div class="room" style="margin-top:20px;">
			<h1>Sparta</h1>
			<label style="float:right;margin-top:11px;">OwnerName</label>
			<label class="centered-resource status">Waiting</label>
			<button class="btn" style>Join</button>
			<h3 style="float:right; position:relative; bottom:0px; right:0px;">2/4</h3>				
		</div>
		
		
		</div>
</div>

<div class="centered-resource">
        <form onsubmit="javascript:sendChatMessage();return false;"  id="chat">
                        <div id="messages">
                                <div id="nicknames"> <label>Connecting to Game Server </label></div>
                                <div id="lines"></div>
                        </div>
                        
                        <div id="send-message">
                                <input id="message">
                                <button id="sendButton" >Send</button>
                        </div>
        </form>
</div>
{%endblock%}